<template>
    <div class="example">
        <h5>pubilcTable:</h5>
        <section class="table">
            <manage-pubilc-table :el_tableData="tableData">
                <template slot="buttonTable">
                    <el-button style="float: right;" ><router-link :to="{path:'/edit_system_user'}">添加</router-link></el-button>
                </template>
                <template slot="tableShow" >
                    <el-table-column align="center" v-for="item in tableShow" :key="item.index"  :prop="item.prop"  :label="item.label"></el-table-column>
                    <el-table-column align="center" label="操作" width="180">
                        <template>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </template>
            </manage-pubilc-table>
            <ul class="explain">
                <li>manage-pubilc-table</li>
                <li>section class="table"进行分类</li>
                <li>slot="buttonTable" 放置功能按钮</li>
                <li>slot="tableShow" 放置表格</li>
                <li>表格通过 el-table-column 循环放置</li>
                <li> 操作部分另起自定义设置 </li>
            </ul>
        </section>
        <section class="table">
            <manage-pubilc-table :el_tableData="tableData">
                <template slot="buttonTable">
                    <el-button style="float: right;" ><router-link :to="{path:'/edit_system_user'}">添加</router-link></el-button>
                </template>
                <template slot="tableShow" >
                    <el-table-column align="center" v-for="item in tableShow" :key="item.index"  :prop="item.prop"  :label="item.label"></el-table-column>
                </template>
            </manage-pubilc-table>
            <ul class="explain">
                <li> 操作可以不使用 </li>
                
            </ul>
        </section>
        <section class="table">
            <manage-pubilc-table :el_tableData="tableData">
                <template slot="tableShow" >
                    <el-table-column align="center" v-for="item in tableShow" :key="item.index"  :prop="item.prop"  :label="item.label"></el-table-column>
                    <el-table-column align="center" label="操作" width="180">
                        <template>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </template>
            </manage-pubilc-table>
            <ul class="explain">
                <li>slot="buttonTable" 可以不使用</li>
            </ul>
        </section>
    </div>
</template>
<script>
export default {
    data(){
        return{
            // 列表
            tableShow:[
                {index:0,prop:"id",label:"编号"},
                {index:1,prop:"date",label:"所属机构"},
                {index:2,prop:"name",label:"姓名"},
                {index:3,prop:"sex",label:"性别"},
                {index:4,prop:"mobile",label:"手机号"},
                {index:5,prop:"username",label:"登录名"},
                {index:6,prop:"rolename",label:"角色"},
                {index:7,prop:"enabled",label:"状态"},
            ],
            tableData: [
                {}
            ],
        }
    },
    
}
</script>